<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用vue-完成选项卡的功能</title>
    <style>
        *{padding:0;margin: 0}
        .tablbox {margin: 100px auto;width: 600px;background:#ccc;overflow: hidden}
        .tablbox .tablbox-tit{overflow: hidden;display: flex;justify-content: space-around}
        .tablbox .tab-items{float: left;padding:0 10px;border:1px solid #ccc;margin:0 6px;}
        .tablbox .tab-items.active{color: red}

        .tablbox .tab-items-content{padding:20px 10px 20px 16px;text-align: center}
        .tablbox .tab-items-content-item.active{display: block}
        .tablbox .tab-items-content-item{display: none}
    </style>
</head>
<body>

    <div class="tablbox">
       <div class="tablbox-tit">
           <div class="tab-items active">新闻</div>
           <div class="tab-items">娱乐</div>
           <div class="tab-items">电影</div>
       </div>

        <div class="tab-items-content">
            <div class="tab-items-content-item active">新闻的内容</div>
            <div class="tab-items-content-item">娱乐的内容</div>
            <div class="tab-items-content-item">电影内容</div>
        </div>
    </div>



</body>
</html>